<template>
  <div class="contianer">
    <div class="find-search">
      <div>
        <label>区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：</label>
        <span :class="{isactive: isArea == 0}" @click="choseArea(0)">不限</span>
        <span
         @click="choseArea(index+1 ,item)"
          v-for="(item, index) in areas"
          :key="index"
          :class="{isactive: isArea == (index+1)}"
        >{{item}}</span>
      </div>
      <div>
        <label>面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积：</label>
        <span
          v-for="(item, index) in acreageArr"
          :class="{isactive: isAcreage == index}"
          :key="index"
          @click="choseAcreage(index,item)"
        >{{item}}</span>
        <!--<el-input size="mini" v-model="acreageTop" style="width:100px;"></el-input>&nbsp;—&nbsp;
        <el-input size="mini" v-model="acreageBottom" style="width:100px;"></el-input>&nbsp;㎡&nbsp;
        <el-button size="mini" @click="choseAcreage(7)" class="btn">确定</el-button>-->
      </div>
      <div>
        <label>月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;租：</label>
        <span
          v-for="(item, index) in rentArr"
          :class="{isactive: isRent == index}"
          @click="choseRent(index)"
          :key="index"
        >{{item}}</span>
       <!-- <el-input size="mini" v-model="rentTop" style="width:100px;"></el-input>&nbsp;—&nbsp;
        <el-input size="mini" v-model="rentBottom" style="width:100px;"></el-input>&nbsp;元&nbsp;
        <el-button size="mini" @click="choseRent(7)" class="btn">确定</el-button>-->
      </div>
      <div style="display: flex;flex-wrap: wrap">
        <label>餐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;饮：</label>
        <span
          v-for="(item, index) in shopTypeList"
          :class="{isactive: isShopType == index}"
          @click="choseshopType(index,item.id)"
          :key="index"
          style="margin-bottom: 15px"
        >{{item.name}}</span>
      </div>
    </div>
    <div class="showfind">
      <div class="find-left">
        <div class="showfind-top">
          <p>综合排序</p>
          <div>
            共
            <span>{{totals}}</span>个相关铺源
          </div>
        </div>
        <cards :id="2" :contentItem="item" v-for="(item,index) in searchList" :key="index"></cards>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="total, prev, pager, next, jumper"
            :total="totals"
          ></el-pagination>
        </div>
      </div>
      <div class="find-right">
        <div class="ad-title">
          <span>热门推荐</span>
        </div>
        <ul>
          <li v-for="(item, index) in recommendList" @click="godetail(item,1)" :key="index">
            <img :src="item.shPic | stringToArr" alt />
            <div>{{item.shName}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import cards from "@/components/card";
export default {
  data() {
    return {
      choosedArea:"",
      isArea:0,
      isAcreage: 0,
      isRent: 0,
      isShopType: 0,
      totals: 0,
      searchList: [],
      recommendList: [],
      page: 1,
      limit: 20,
      ischose: 1,
      shopTypeList: [],
      acreageArr: [
        "不限",
        "0-20㎡",
        "20㎡-50㎡",
        "50㎡-100㎡",
        "100㎡-200㎡",
        "200㎡-500㎡",
        "500㎡以上"
      ],
      rentArr: [
        "不限",
        "0-2千元",
        "2千元-5千元",
        "5千元-1万元",
        "1万元-2万元",
        "2万元-5万元",
        "5万元"
      ],
      findsList: ['不限','西餐','中餐', '堂食', '快餐小吃', '面食', '甜品', '水果', '冷饮', '咖啡', '茶艺'],
      acreageTop: "",
      acreageBottom: "",
      rentTop: "",
      rentBottom: "",
      choosedAcreageTop: "",
      choosedAcreageBottom: "",
      choosedRentTop: "",
      choosedRentBottom: "",
      choosedShopType: ""
    };
  },
  computed: {
    areas() {
      return this.$store.state.areas;
    }
  },
  filters: {
    stringToArr(string) {
      let arr = string.split(",");
      if (arr[0] === "undefined" || string=="") {
        return "http://47.92.115.193/img/2020-02-26/2020022618231992.jpg";
      } else {
        return arr[0];
      }
    }
  },
  components: {
    cards
  },
  created() {
    this.search();
    this.getShopeTypeList();
    this.getShopeParts();
  },
  methods: {
    choseArea(num, area) {
      /* 选择地区 */
      this.isArea = num;
      this.choosedArea = area;
        this.search();
    },
    godetail(e,i){
      window.open('/#/details'+i+'/' + e.id)
    },
    //   分类
    choseshopType(num, type) {
      if (!type) {
        this.choosedShopType = "";
      } else {
        this.choosedShopType = type;
      }
      this.isShopType = num; // 用于显示第几个高亮
      this.search();
    },
    //   面积分类选择
    choseAcreage(index) {
      this.isAcreage = index;
      switch (index) {
        case 0:
          this.choosedAcreageTop = "";
          this.choosedAcreageBottom = "";
          break;
        case 1:
          this.choosedAcreageTop = 0;
          this.choosedAcreageBottom = 20;
          break;
        case 2:
          this.choosedAcreageTop = 20;
          this.choosedAcreageBottom = 50;
          break;
        case 3:
          this.choosedAcreageTop = 50;
          this.choosedAcreageBottom = 100;
          break;
        case 4:
          this.choosedAcreageTop = 100;
          this.choosedAcreageBottom = 200;
          break;
        case 5:
          this.choosedAcreageTop = 200;
          this.choosedAcreageBottom = 500;
          break;
        case 6:
          this.choosedAcreageTop = 500;
          this.choosedAcreageBottom = 99999;
          break;
        case 7:
          this.choosedAcreageTop = this.acreageTop;
          this.choosedAcreageBottom = this.acreageBottom;
          break;
      }
      this.search();
    },
    //月租分类选择
    choseRent(num) {
      this.isRent = num;
      this.isChoosedRent = true;
      switch (num) {
        case 0:
          //
          this.choosedRentTop = "";
          this.choosedRentBottom = "";
          break;
        case 1:
          this.choosedRentTop = 0;
          this.choosedRentBottom = 20;
          break;
        case 2:
          this.choosedRentTop = 20;
          this.choosedRentBottom = 50;
          break;
        case 3:
          this.choosedRentTop = 50;
          this.choosedRentBottom = 100;
          break;
        case 4:
          this.choosedRentTop = 100;
          this.choosedRentBottom = 200;
          break;
        case 5:
          this.choosedRentTop = 200;
          this.choosedRentBottom = 500;
          break;
        case 6:
          this.choosedRentTop = 500;
          this.choosedRentBottom = 99999;
          break;
        case 7:
          this.choosedRentTop = this.rentTop;
          this.choosedRentBottom = this.rentBottom;
          break;
      }
      this.search();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.search();
    },
    chose(index) {
      this.ischose = index;
    },
    getShopeParts() {
      // 配套设施
      this.$http.get(this.$api.getShopsParts()).then(res => {
        if (res.data.code === 0) {
          this.$store.state.partsArr = res.data.Partss;
        }
      });
    },
    getShopeTypeList() {
      // 商铺类型 美食餐饮
      this.$http.get(this.$api.getShopsTypes()).then(res => {
        if (res.data.code === 0) {
          this.shopTypeList = res.data.ShopsTypes;
        }
      });
    },
    search() {
      this.$http
        .get(this.$api.searchShops(), {
          params: {
            reType: 2,
            province: this.$store.state.provinceG,
            // city: this.$store.state.cityG,
            city:"",
            arer: this.choosedArea,
            acreage1: this.choosedAcreageTop,
            acreage2: this.choosedAcreageBottom,
            rentPrice1: this.choosedRentTop,
            rentPrice2: this.choosedRentBottom,
            shType: this.choosedShopType,
            page: this.page,
            limit: this.limit
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            if (res.data.page) {
              this.searchList = res.data.page.list;
              this.totals = res.data.page.totalCount;
            } else {
              this.searchList = [];
              this.totals = 0;
            }
            this.recommendList = res.data.recommend;
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.ad-title {
  background: #eef7fe;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 700;
  height: 58px;
  line-height: 58px;
  color: #999;
  span {
    border-bottom: 2px solid #999;
    padding-bottom: 5px;
  }
}
.find-search {
  background: #fff;
  padding: 21px 0 0 12px;
  color: #333333;
  width: 1200px;
  font-size: 14px;
  height: 160px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(221, 221, 221, 1);
  line-height: 11px;
  position: relative;
  transition: all 300ms;
  &.toggle{
    height: 200px;
  }
  label {
    color: #F11F0F;
    width: 65px;
    display: inline-block;
  }

  > div {
    span {
      cursor: pointer;
      margin-right: 15px;
    }

    margin-bottom: 19px;
  }
  .btn {
    color: #ff5001;
    background: #feddcc;
    border: 0;
    outline: 0;
  }
}
.block {
  padding: 20px 0;
  text-align: center;
}
.find-right,
.find-left,
.showfind,
.showfind-top {
  width: 100%;
}
.find-left {
  margin-right: 20px;
  background: #fff;
  width: calc(100% - 280px);
}
.find-right {
  background: none;
  width: 260px;
  li {
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
    img {
      width: 100%;
      vertical-align: top;
    }
    div {
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
    }
  }
  li:hover {
    outline: 1px solid #ff5001;
  }
}
.showfind {
  margin: 20px 0;
  display: flex;
  .showfind-top {
    height: 58px;
    line-height: 58px;
    display: flex;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    div {
      margin-right: 20px;
    }
    p {
      background: #ff5001;
      color: #fff;
      padding: 0 15px;
    }
    span {
      color: #ff5001;
    }
  }
}
.contianer {
  width: 1200px;
  margin: 20px auto;
  text-align: left;
  line-height: 35px;
  font-size: 16px;
}
.find-search {
  div {
    span {
      cursor: pointer;
      margin-right: 15px;
    }
  }
}
.isactive {
  color: #ff5001;
}
.find-chose {
  border-bottom: 1px solid #f5f5f5;
  span {
    padding: 2px 5px;
  }
}
.choseActive {
  outline: 2px solid #ff5001;
}
</style>
